<template>
	<view class="search">
		<toSafe :bgColor="'#fff'"></toSafe>
		<view class="searchInput">
			<view class="search-top">
				<view>消 息</view>
			</view>
			<view class="search-tabs">
				<!-- <up-tabs :list="tabLists" @click="tabClick" :scrollable="false" lineColor="#325EF5"
					:activeStyle="{color:'#000','border-bottom': '3px solid #0060f4'}"
					:inactiveStyle="{opcity: 0.8,'border-bottom':'none'}" lineWidth="0"></up-tabs> -->
				<view :class="['search-tabs-item',item.isCheck? 'tabs-item': '']" v-for="item in tabLists"
					:key="item.id" @click="tabClick(item)">
					<text>{{item.name}}</text>
					<!-- <text class="tabs-item-icon">●</text> -->
				</view>
			</view>
		</view>
		<up-loadmore status="loading" v-if="isLoading" />
		<scroll-view scroll-y="true" class="scroll-Y" :show-scrollbar="false" @scroll="scroll" v-else>
			<up-empty mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png" v-if="lists.length == 0">
			</up-empty>
			<view class="item-container" v-for="item in lists" :key="item.id" @click="detailHandler(item)">
				<view class="item">
					<view class="item-top">
						<view class="top-title" v-if="item.informType == 1">
							<up-icon name="/punlic/image/wxinfo.png"></up-icon>
							<text>维修信息</text>
						</view>
						<view class="top-title" v-else-if="item.informType == 2">
							<up-icon name="/punlic/image/wbinfo.png"></up-icon>
							<text>维保信息</text>
						</view>
						<view class="top-title" v-else>
							<up-icon name="/punlic/image/wbinfo.png"></up-icon>
							<text>安全隐患预警</text>
						</view>
						<view class="top-time">{{item.createTime}}</view>
					</view>
					<view class="item-body">
						<view class="body-title">
							<view class="title-point" v-if="item.ifRead == 2">●</view>
							<view class="title-name">{{item.title}}</view>
						</view>
						<view class="body-info">{{item.content??'暂无通知内容'}}</view>
					</view>
					<view class="item-detail">
						<text>查看详情</text>
						<up-icon name="arrow-right"></up-icon>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script setup>
	import {
		getUserMessage,
		changeUserStatus
	} from '@/api/User.js'
	import toSafe from '@/compoents/top-safe.vue'
	import {
		onLoad,
		onShow,
	} from '@dcloudio/uni-app'
	import {
		ref,
		reactive,
		onMounted
	} from 'vue'
	// tabs列表
	let tabLists = reactive([{
			name: '全部',
			id: 0,
			isCheck: true,
		},
		{
			name: '维修信息',
			id: 1,
			isCheck: false,
		},
		{
			name: '维保信息',
			id: 2,
			isCheck: false,
		},
	]);
	let lists = reactive([])
	let newList = reactive([])
	const isLoading = ref(false)
	onMounted(() => {})
	onLoad(() => {
		getList()
	})
	onShow(() => {
		getList()
		tabClick({
			name: '全部',
			id: 0,
			isCheck: true,
		})
	})
	const getList = () => {
		isLoading.value = true
		getUserMessage().then(res => {
			if (res.code == 200) {
				lists.splice(0, lists.length, ...res.rows)
				newList.splice(0, newList.length, ...res.rows)
			}
			isLoading.value = false
		})
	}
	const tabClick = e => {
		tabLists.map(item => {
			item.isCheck = false
			if (item.id == e.id) {
				item.isCheck = true
			}
		})
		if (e.id == 0) {
			lists.splice(0, lists.length, ...newList)
		} else {
			let arr = []
			newList.forEach(item => {
				if (item.informType == e.id) {
					arr.push(item)
				}
			})
			lists.splice(0, lists.length, ...arr)
		}
	}
	const HandleReturn = () => {
		uni.navigateBack({
			delta: 1
		});
	}
	const detailHandler = (item) => {
		// console.log(item, 'item');
		if(item.informType==2){
			uni.navigateTo({
				url: '/pages/maintenance/tasks?title=' + item.title
			})
		}else{
			uni.navigateTo({
				url: '/pages/fault/repair'
			})
		}
		// changeUserStatus(item.id).then(res => {
		// 	if (res.code == 200) {}
		// })
	}
</script>

<style lang="less" scoped>
	@import "../../App.less";

	.search {
		width: 100%;
		height: 100%;
		background: #F6F8FA;
		overflow: hidden;

		.searchInput {
			width: 100%;
			height: 176rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			background-color: #fff;

			// position: fixed;
			// top: 0;
			// left: 0;
			padding: 0 20rpx;
			z-index: 99;

			.search-top {
				.inline_center();
				height: 88rpx;
				width: 100%;
				// display: flex;
				// align-items: center;

				>view {
					width: 100%;
					line-height: 88rpx;
					height: 88rpx;
					text-align: center;
					margin-left: -8vw;
					font-size: 34rpx;
					font-weight: 700;
				}
			}

			.search_icons {
				.inline_center();
				width: 100%;
				height: 68rpx;
				padding: 16rpx 20rpx;
				background-color: #F2F2F2;
				border-radius: 34rpx;

				.icon {
					margin-right: 10rpx;
				}

				.uni-input {
					width: 100%;
					border-right: 1px solid #325EF5;
					margin-right: 20rpx;
					height: 100%;
				}

				.search {
					background-color: inherit;
					width: 100rpx;
					height: 68rpx;
					font-size: 32rpx;
					color: #325EF5;
					line-height: 68rpx;
				}
			}

			.search-tabs {
				width: 100%;
				height: 88rpx;
				display: flex;
				align-items: center;

				.search-tabs-item {
					height: 88rpx;
					line-height: 88rpx;
					margin: 0 25rpx;
					font-size: 30rpx;
					opacity: 0.8;
					position: relative;

					.tabs-item-icon {
						font-size: 4rpx;
						color: #ff0000;
						position: absolute;
						transform: translate(-10%, -10%);

					}

				}

				.tabs-item {
					opacity: 1;
					border-bottom: 3px solid #325EF5;
				}


				// margin-top: 10rpx;
				::v-deep .u-tabs__wrapper__nav__item__text {
					padding-bottom: 12rpx;
					font-size: 30rpx;
				}
			}
		}

		.search-placeholder {
			width: 100%;
			height: 60rpx;
			background-color: #cfd9f9;
			font-size: 28rpx;
			color: #325EF5;
			text-align: center;
			line-height: 60rpx;
		}

		.scroll-Y {
			padding: 0 28rpx 40rpx 28rpx;
			height: calc(100% - 140rpx);

			.item-container {
				.item {
					background-color: #fff;
					border-radius: 24rpx;
					padding: 31rpx 24rpx;
					font-size: 24rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-around;

					.item-top {
						.inline_space_between();

						.top-title {
							display: flex;

							text {
								font-size: 28rpx;
								margin-left: 10rpx;
							}

						}

						.top-time {
							font-size: 24rpx;
							opacity: 0.6;
						}
					}

					.item-body {
						margin: 20rpx 0;
						padding: 20rpx 0;
						border-top: 1rpx solid #f5f5f5;
						border-bottom: 1rpx solid #f5f5f5;

						.body-title {
							display: flex;

							.title-point {
								color: red;
								margin-right: 10rpx;
							}

							.title-name {
								font-size: 30rpx;
								font-weight: bold;
							}
						}

						.body-info {
							margin-top: 20rpx;
							font-size: 26rpx;
							opacity: 0.8;
						}
					}

					.item-detail {
						.inline_space_between()
					}


				}

				&:nth-child(1) {
					margin-top: 20rpx;
				}

				&::after {
					content: '';
					display: block;
					width: 100%;
					height: 20rpx;
				}
			}


		}

		.uni-list {
			height: 80rpx;
		}
	}

	::v-deep.u-badge--dot {
		width: 6px;
		height: 6px;
		position: relative;
		// left: 50%;
		transform: translate(-80%, -100%);
	}
</style>